<template>
	<div style="display: flex;height: 100vh; border: 1px solid #eee">
		<div style="width: 15%;">
			<!-- 左边功能区域 -->
			<el-aside :width="asideW" 
			style="background-color: rgb(238, 241, 246);height: 100%;box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
				<el-menu style="height: 100%;overflow-x: hidden;"
				background-color="rgb(48,68,88)" text-color="#fff" 
				active-text-color="#ffd04b"
				 :collapse-transition="false" 
				 :collapse="isCollspan" router>
					<!-- 左上角logo区域 -->
					<div style="height: 60px;line-height: 60px;text-align: center;">
						<img src="../assets/logo.png" alt="" width="20px" 
						style="position: relative;top: 5px;margin-right: 5px;">
						<b style="color: white;" v-show="myTitle">OA管理系统</b>
					</div>
					<el-submenu index="1">
					    <template slot="title"><i class="el-icon-message"></i>部门管理</template>
					    <el-menu-item index="/main/dept">部门管理</el-menu-item>
					</el-submenu>
					<el-submenu index="2">
					    <template slot="title"><i class="el-icon-message"></i>员工管理</template>
					     <el-menu-item index="/main/emp">员工管理</el-menu-item>
					</el-submenu>
					<el-submenu index="3">
					    <template slot="title"><i class="el-icon-message"></i>知识库管理</template>
					    <el-menu-item index="/main/knowledge">本地知识库</el-menu-item>
					</el-submenu>
					<el-submenu index="4">
					    <template slot="title"><i class="el-icon-message"></i>智能客服</template>
					    <el-menu-item index="/main/aichat">客服系统</el-menu-item>
					</el-submenu>
					<el-submenu index="5">
					    <template slot="title"><i class="el-icon-message"></i>数据统计与分析</template>
					    <el-menu-item index="/main/statistic">数据分析</el-menu-item>
					</el-submenu>
					<el-submenu index="6">
                       <template slot="title"><i class="el-icon-message"></i>热词管理</template>
                       <el-menu-item index="/main/TermFreq">热词管理</el-menu-item>
                    </el-submenu>
					<el-submenu index="7">
                       <template slot="title"><i class="el-icon-message"></i>热词展示</template>
                       <el-menu-item index="/main/TermFreqMap">热词展示</el-menu-item>
                    </el-submenu>
					<el-submenu index="8">
                       <template slot="title"><i class="el-icon-message"></i>岗位管理</template>
                       <el-menu-item index="/main/position">岗位管理</el-menu-item>
                    </el-submenu>
				</el-menu>
			</el-aside>
		</div>
		<div style="width: 85%;">
			<!-- 右上角区域功能 -->
			<div style="font-size: 14px;border-bottom: 1px solid #ccc;line-height: 60px;width: 100%;">
				<el-row :gutter="20">
				  <el-col :span="12" :offset="20">
					  <!-- div收缩按钮 -->
					  <el-dropdown style="width: 150px;cursor: pointer;">
					  	<div>
					  		<img :src="userObj.userFace" alt="" 
					  		style="width: 45px;height: 45px; border-radius: 50%;position: relative;top:15px;margin-right: 15px;">
					  		<span>{{userObj.userName}}</span><i class="el-icon-arrow-down" style="margin-left: 10px;"></i>
					  	</div>
					  	<el-dropdown-menu slot="dropdown">
					  		<el-dropdown-item>
					  			<span @click="userInfo">个人信息</span>
					  		</el-dropdown-item>
					  		<el-dropdown-item>退出</el-dropdown-item>
					  	</el-dropdown-menu>
					  </el-dropdown>
				  </el-col>
				</el-row>
			</div>
			<div>
				<el-main>
					<!-- 路由显示区域 -->
					<el-breadcrumb v-if="this.$router.currentRoute.path!='/main'">
					  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					  <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
					   <el-divider></el-divider>
					</el-breadcrumb>
					<div v-if="this.$router.currentRoute.path=='/main'">
						<h1>欢迎进入本系统</h1>
					</div>
					<router-view></router-view>
				</el-main>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				collspanBtnClass: 'el-icon-s-fold',
				//展开或者收起
				isCollspan: false,
				asideW: "200px",
				myTitle: true,
				userObj:{
					userFace:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
					userName:'张三'
				}
			}
		},
		methods: {
			collspanBtn() {
				this.isCollspan = !this.isCollspan;
				if (this.isCollspan) {
					this.asideW = "64px";
					this.collspanBtnClass = 'el-icon-s-unfold',
					this.myTitle = false;
				} else {
					this.asideW = "200px";
					this.collspanBtnClass = 'el-icon-s-fold',
					this.myTitle = true;
				}
			},
			aa(){
			},
			userInfo(){
			}
		}
	};
</script>
<style>
</style>
